<template>
  <div class="event2">
    <h2>{{ msg }}</h2>
    <div class="box1" @mousedown.stop="fn1" @mouseover="over1">
      <div class="box2" @mousedown.stop="fn2" @mouseover.self="over2">
        <div class="box3" @mousedown.stop="fn3" @mouseover.self="over3"></div>
      </div>
    </div>
  </div>
  <input type="button" @click.once="click" value="按钮">
  <textarea @keydown.shift.enter.alt.ctrl="down"></textarea>
</template>

<script>
export default {
  name:"Event2",
  data(){
    return {
      msg: "事件修饰符"
    }
  },
  methods:{
    fn1(){
      console.log(1)
    },
    fn2(){
      console.log(2)
    },
    fn3(){
      console.log(3)
    },
    over1(){
      console.log("进入事件1")
    },
    over2(){
      console.log("进入事件2")
    },
    over3(){
      console.log("进入事件3")
    },
    click(){
      console.log("点击了按钮")
    },
    down(){
      console.log("按下的键盘")
    }
  }
}
</script>

<style>
.event2 .box1{
  width:150px;
  height:150px;
  background: red;
}
.event2 .box2{
  width:100px;
  height:100px;
  background: green;
}
.event2 .box3{
  width:50px;
  height:50px;
  background: blue;
}
</style>


<!-- 对象： -->
<!-- 属性：数据 -->
<!-- 方法：功能，函数 -->
